


import React, { useCallback, useEffect, useMemo } from 'react'
import './index.css'
import VCard from '../../../components/VCard'
import { getFleetUseInfo, getVehicleCountByFleet } from './service'
import { Spin } from 'antd'



export default function FleetUsageStats() {
  const [fleetUse, setFleetUse] = React.useState<any[]>([]);
  const [fleetVehicleCount,setFleetVehicleCount] = React.useState<{fleet_name:string,count:number}[]>([]);
  const PieOption = () => {
    return {
    title: {
      text: '车辆统计饼图',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        bottom: 'bottom',
        right: 'right',
        name: 'name',
        type: 'pie',
        radius: '50%',
        data: 
        fleetVehicleCount.map(item => {
            return {
              value: item.count,
              name: item.fleet_name
            }
          })
        ,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }}
  const [loading, setLoading] = React.useState(false)

  const columns=[
    {
      title: '车队编号',
      dataIndex: 'fleet_id',

    },
    {
      title: '车队名称',
      dataIndex: 'fleet_name',
      ellipsis: true,

    },
    {
      title: '出车次数',
      dataIndex: 'count',

    },
    {
      title: '总里程',
      dataIndex: 'mileage',
      sorter: (a: any, b: any) => a.mileage - b.mileage,
    },

  ]

  const queryList = async () => {
    setLoading(true)
    await getFleetUseInfo().then(res => {
      setFleetUse(res.data.data)
    })
    await getVehicleCountByFleet().then(res => {
      setFleetVehicleCount(res.data.data)
    })
    setLoading(false)
  }
  useEffect(() => {
    queryList()
  }, [])
  return (
    <div className="page-content-container">
      <div className="page-title-container">
        <div className="page-title">车队出车统计</div>
      </div>
      <div className="page-content">
        {/* <VTable></VTable> */}
        {/* <VCard type="card"></VCard> */}
        <Spin spinning={loading}>
          {/* <div className="VCard-list">
            <VCard type={'cards'} title={'车队'} dataSource={driverStatus}></VCard>
          </div> */}
          <div className="VCard-list">
          <VCard title={'出车信息'} type={'table'} columns={columns} dataSource={fleetUse}></VCard>
          </div>
          <div className="VCard-list">
            <VCard title={'车队车数统计图'} type={'pie'} dataSource={PieOption()}></VCard>
          </div>
      
        </Spin>
      </div>
    </div>
  )
}
